<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            #{ managerCriarCartorio.cartorio.id == null ? 'Cadastrar Cartório' : 'Editar Cartório'  }
            
            <script>
                function title() {
                    document.getElementById('config').className='selected';
                }
                window.onload=title;
            </script>
        </ui:define>
        <ui:define name="content">
            <h:form id="criarCartorioForm">       

                <p:messages id="criarCartorioMessages" autoUpdate="true" />
                <p:fieldset id="cartorioDadosPanel" 
                            legend="Dados do Cartório">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="razaoSocialInputText" value="#{ managerCriarCartorio.cartorio.razaoSocial }"
                                         required="true" requiredMessage="Razão Social é obrigatório" />
                        </div>
                    </div> 
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="nomeFantasiaInputText" value="#{ managerCriarCartorio.cartorio.nomeFantasia }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Telefone" for="tipoTelefoneSelectOneMenu" />
                        </div>
                        <div class="column10">
                            <p:selectOneMenu id="tipoTelefoneSelectOneMenu" value="#{ managerCriarCartorio.cartorio.telefone.tipoTelefone }">
                                <f:selectItems value="#{ enums.tiposTelefone() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="DDD" for="dddInputMask" />
                        </div>
                        <div class="column3">
                            <p:inputMask id="dddInputMask" value="#{ managerCriarCartorio.cartorio.telefone.ddd }"
                                         mask="99" />

                        </div>
                        <div class="column1">
                            <p:outputLabel  value="Número" for="numeroTelefoneInputText" />
                        </div>
                        <div class="column2">
                            <p:inputText id="numeroTelefoneInputText" value="#{ managerCriarCartorio.cartorio.telefone.numero }" />
                        </div>
                        <div class="column1">
                            <p:outputLabel value="Email" for="emailInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="emailInputText" value="#{ managerCriarCartorio.cartorio.email }" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel  value="Site" for="siteInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="siteInputText" value="#{ managerCriarCartorio.cartorio.site }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset id="enderecoCartorioPanel" legend="Endereço do Cartório">
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoInputText" />
                        </div>
                        <div class="column4">
                            <p:selectOneMenu id="tipoEnderecoInputText" value="#{ managerCriarCartorio.cartorio.endereco.tipo  }">
                                <f:selectItems value="#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroInputText" />
                        </div>
                        <div class="column4">
                            <p:selectOneMenu id="tipoLogradouroInputText" value="#{ managerCriarCartorio.cartorio.endereco.tipoLogradouro  }"
                                             required="true" requiredMessage="Tipo do logradouro é obrigatório">
                                <f:selectItems value="#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>
                        <div class="column2">
                            <p:outputLabel  value="Logradouro" for="logradouroInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText  id="logradouroInputText" value="#{ managerCriarCartorio.cartorio.endereco.logradouro }"
                                          required="true" requiredMessage="Logradouro é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="cidadeAutoComplete" value="#{ managerCriarCartorio.cartorio.endereco.cidade }"
                                    forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                    itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarCartorio.autocompletarCidade }"
                                    converter="conversorcidade" minQueryLength="3" required="true" requiredMessage="Cidade é obrigatório">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@this, :criarCartorioForm:bairroAutoComplete" />
                            </p:autoComplete>
                        </div>
                        
                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="bairroAutoComplete" value="#{ managerCriarCartorio.cartorio.endereco.bairro }"
                                forceSelection="true" dropdown="true" var="bairro" itemValue="#{ bairro }" 
                                itemLabel="#{ bairro.nome }" completeMethod="#{ managerCriarCartorio.autocompletarBairro }"
                                disabled="#{ managerCriarCartorio.cartorio.endereco.cidade == null }"
                                converter="conversorbairro" minQueryLength="3" required="true" requiredMessage="Bairro é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText id="numeroInputText" value="#{ managerCriarCartorio.cartorio.endereco.numero  }" required="true"
                                         requiredMessage="Número é obrigatório" />
                        </div>
                        
                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepInputMask" />
                        </div>
                        <div class="column4">
                            <p:inputMask id="cepInputMask" value="#{ managerCriarCartorio.cartorio.endereco.cep  }"
                                         mask="99.999-999" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset id="dadosTitularPanel" legend="Dados do Titular">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome" for="nomeTitularInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="nomeTitularInputText" value="#{ managerCriarCartorio.cartorio.titular.nome }"
                                         required="true" requiredMessage="Nome é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel  value="RG" for="rgInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText id="rgInputText" value="#{ managerCriarCartorio.cartorio.titular.rg  }" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="CPF" for="cpfInputMask" />
                        </div>
                        <div class="column4">
                            <p:inputMask id="cpfInputMask" value="#{ managerCriarCartorio.cartorio.titular.cpf  }"
                                         mask="999.999.999-99" />
                        </div>
                    </div>                      
                </p:fieldset>

                <p:fieldset id="enderecoTitularPanel" legend="Endereço do Titular">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoTitularInputText" />
                        </div>
                        <div class="column4">
                            <p:selectOneMenu id="tipoEnderecoTitularInputText" value="#{ managerCriarCartorio.cartorio.titular.endereco.tipo  }">
                                <f:selectItems value="#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroTitularInputText" />
                        </div>
                        <div class="column4">
                            <p:selectOneMenu id="tipoLogradouroTitularInputText" value="#{ managerCriarCartorio.cartorio.titular.endereco.tipoLogradouro  }">
                                <f:selectItems value="#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Logradouro" for="logradouroTitularInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText id="logradouroTitularInputText" value="#{ managerCriarCartorio.cartorio.titular.endereco.logradouro }" />
                        </div>
                    </div>
                 
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeTitularAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="cidadeTitularAutoComplete" value="#{ managerCriarCartorio.cartorio.titular.endereco.cidade }"
                                    forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                    itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarCartorio.autocompletarCidade }"
                                    converter="conversorcidade" minQueryLength="3">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@this, :criarCartorioForm:bairroTitularAutoComplete" />
                            </p:autoComplete>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroTitularAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="bairroTitularAutoComplete" value="#{ managerCriarCartorio.cartorio.titular.endereco.bairro }"
                                forceSelection="true" dropdown="true" var="bairro" itemValue="#{ bairro }" 
                                itemLabel="#{ bairro.nome }" completeMethod="#{ managerCriarCartorio.autocompletarBairro }"
                                disabled="#{ managerCriarCartorio.cartorio.titular.endereco.cidade == null }"
                                converter="conversorbairro" minQueryLength="3" />                            
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroTitularInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText id="numeroTitularInputText" value="#{ managerCriarCartorio.cartorio.titular.endereco.numero  }"/>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepTitularInputMask" />
                        </div>
                        <div class="column4">
                            <p:inputMask id="cepTitularInputMask" value="#{ managerCriarCartorio.cartorio.titular.endereco.cep  }"
                                         mask="99.999-999" />
                        </div>
                    </div>
                </p:fieldset>

                <div class="command">
                    <p:commandButton action="#{ managerCriarCartorio.salvar() }"
                        oncomplete="widthFix();"
                        value="Salvar" update="@form" icon="ui-icon-disk"
                        styleClass="ui-priority-primary" onsuccess="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="indexCartorio.xhtml" />
                </div>                    

                <script type='text/javascript' src='media/js/widthFix.js'></script>

            </h:form>

        </ui:define>
    </ui:composition>

</html>